<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="themes/default/layout/public">

<head>
    <link th:href="@{/static/js/summernote/summernote.css}" rel="stylesheet"/>
</head>
<div  layout:fragment="content">
    <div class="row mt-10">
        <ol class="breadcrumb">
            <li><a th:href="@{/questions}">问答</a></li>
            <li><a th:href="|/question/${question.id}|" th:text="${question.title}"></a></li>
            <li class="active">编辑问题</li>
        </ol>
        <form th:object="${question}" id="questionForm" method="POST" role="form" th:action="|/question/edit/${question.id}|">
            <input type="hidden" name="id" th:value="${question.id}" />
            <input type="hidden" id="tagNames" name="tagNames" value="" />

            <div class="form-group" th:classappend="${#fields.hasErrors('title')}?:'has-error'">
                <label for="title">问题标题:</label>
                <input id="title" type="text" name="title"  class="form-control input-lg" placeholder="请在这里概述您的问题" th:value="${question.title}" />
                <p class="help-block" th:if="${#fields.hasErrors('title')}" th:text="${#fields.errors('title')}"></p>
            </div>
            <div class="form-group" th:classappend="${#fields.hasErrors('description')}?:'has-error'">
                <label for="question_editor">问题描述(选填)</label>
                <div id="question_editor" th:utext="${question.description}"></div>
                <p class="help-block" th:if="${#fields.hasErrors('description')}" th:text="${#fields.errors('description')}"></p>
            </div>
            <div class="row">
                <div class="col-xs-4">
                    <div th:class="${#fields.hasErrors('category')}?'form-group has-error':'form-group'">
                        <select name="categoryId" id="categoryId" class="form-control">
                            <option value="">请选择分类</option>
                            <option th:each="category:${categorys}" th:value="${category.id}" th:text="${category.name}"></option>
                        </select>
                        <p class="help-block" th:if="${#fields.hasErrors('category')}" th:text="${#fields.errors('category')}"></p>
                    </div>
                </div>
                <div class="col-xs-8">
                    <select id="select_tags" name="select_tags" class="form-control" multiple="multiple" >
                        <option th:each="tag:${question.tags}" th:value="${tag.name}"  selected th:text="${tag.name}"></option>
                        <!--<option value="13123" data-name="1231323" >123123</option>-->
                    </select>
                </div>
            </div>

            <div class="row mt-20">
                <div class="col-xs-12 col-md-11">
                    <ul class="list-inline">
                        <li class="pull-right" th:if="${GlobalSetting.irrigation.codeCreateQuestion}">
                            <div class="form-group" th:classappend="${validateCodeError}?'has-error'">
                                <input type="text" class="form-control" name="captcha" required="" placeholder="验证码" />
                                <span th:if="${validateCodeError}" th:text="${validateCodeError}" class="help-block">{{ $errors->first('captcha') }}</span>
                                <div class="mt-10"><a href="javascript:void(0);" id="reloadCaptcha"><img src="/code/image?width=60&height=20"></a></div>
                            </div>
                        </li>
                        <li><input type="checkbox" name="hide" th:value="${question.hide}"  th:checked="${question.hide}" />&nbsp;匿名</li>
                    </ul>
                </div>
                <div class="col-xs-12 col-md-1">
                    <input type="hidden" id="question_editor_content"  name="description" th:value="${question.description}"  />
                    <button type="submit" class="btn btn-primary pull-right">确认修改</button>
                </div>

            </div>
        </form>

    </div>
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/css/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/global.js?v=20170412}"></script>
    <link th:href="@{/static/js/select2/css/select2.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/js/select2/css/select2-bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{/static/js/summernote/summernote.min.js}"></script>
    <script th:src="@{/static/js/summernote/lang/summernote-zh-CN.min.js}"></script>
    <script th:src="@{/static/js/select2/js/select2.min.js}"></script>
    <script th:src="@{/static/js/select2/js/i18n/zh-CN.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        var category_id = [[${question.category?.id}]];

        $(document).ready(function() {
            $('#question_editor').summernote({
                lang: 'zh-CN',
                height: 180,
                placeholder:'您可以在这里继续补充问题细节',
                toolbar: [ ['common', ['style','bold','ol','link','picture','clear','fullscreen']] ],
                callbacks: {
                    onChange:function (contents, $editable) {
                        var code = $(this).summernote("code");
                        $("#question_editor_content").val(code);
                    },
                    onImageUpload: function(files) {
                        upload_editor_image(files[0],'question_editor');
                    }
                }
            });

            $("#categoryId option").each(function(){
                if( $(this).val() == category_id ){
                    // $(this).attr("selected","selected");
                    $('#categoryId').val(category_id);
                }
            });


        });
    </script>
</div>